const service = axios.create({
    baseURL: '../js', // url = base url + request url   
    timeout: 5000 // request timeout
})

//主题
let app = new Vue({
    el: '#app',
    components: {
        StatisticalList,
        WxyBar,
        earywaring: EaryWaring,
        riskcommitment: RiskCommitment,
        specialassignments: SpecialAssignments
    },
    computed: {
        currentTabComponent() {
            return this.currentTab.toLowerCase()
        }
    },
    data: {
        defaultCityName: '江苏省',
        cityName: '',
        currentTab: 'EaryWaring',
        tabs: [{ name: '监测预警', 'component': 'EaryWaring' }, { name: '风险承诺', 'component': 'RiskCommitment' }, { name: '特殊作业', 'component': 'SpecialAssignments' }],
        isCounty: false,//是否区县
        areaCode: '',//行政区划代码
        topInfo: {//头部信息
            date: new Date(),//日期
            userName: '某某某'
        },
        currenType: '1',//默认类型
        mapInfo: {
            mapEcharts: null,
            typeList: [
                {
                    type: '1',
                    color: '#1890FF',
                    inRangeColor: ['#1890FF', '#D0E9FF'],//地图渐变颜色
                    name: '危化品企业'
                }, {
                    type: '2',
                    color: '#F04B17',
                    inRangeColor: ['#F04B17', '#FCDBD1'],//地图渐变颜色
                    name: '重大危险源'
                }, {
                    type: '3',
                    color: '#D3291A',
                    inRangeColor: ['#D3291A', '#F6D4D1'],//地图渐变颜色
                    name: '报警企业'
                }, {
                    type: '4',
                    color: '#90B125',
                    inRangeColor: ['#56AF31', '#DDEFD6'],//地图渐变颜色
                    name: '重大危险源风险'
                }, {
                    type: '5',
                    color: '#90B125',
                    inRangeColor: ['#90B125', '#E9EFD3'],//地图渐变颜色
                    name: '危险区域的特殊作业人员'
                }, {
                    type: '6',
                    color: '#755DCB',
                    inRangeColor: ['#755DCB', '#E3DFF5'],//地图渐变颜色
                    name: '特级动火'
                }, {
                    type: '7',
                    color: '#F79100',
                    inRangeColor: ['#F79100', '#FDE9CC'],//地图渐变颜色
                    name: '一级动火'
                }, {
                    type: '8',
                    color: '#26CFA1',
                    inRangeColor: ['#26CFA1', '#D4F5EC'],//地图渐变颜色
                    name: '检维修'
                }, {
                    type: '9',
                    color: '#C950CF',
                    inRangeColor: ['#C950CF', '#F4DCF5'],//地图渐变颜色
                    name: '区域风险'
                }, {
                    type: '10',
                    color: '#3B6BE7',
                    inRangeColor: ['#3B6BE7', '#D8E1FA'],//地图渐变颜色
                    name: '报警数'
                }
            ],//类型列表
            mapData: [],//地图数据
            count: 0, //总数
            inRangeColor: ['#1890FF', '#D0E9FF']//地图渐变颜色
        }
    },
    filters: {
        formatDate,//日期格式化
        formatDateWeek,//日期格式化
        formatNum//总数格式化
    },
    mounted() {
        this.initScale()//缩放自适应
        this.dateTimer = setInterval(() => {
            this.topInfo.date = new Date();
        }, 1000)
        this.getUserInfo()
    },
    methods: {
        init() {//渲染
            this.drawMap()
        },
        convertData(data) {//地图数据过滤
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = this.geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value),
                        symbolSize: [56, 79],
                        symbol: 'image://../images/mark-icon.png'
                    });
                }
            }
            return res;
        },
        convertDataByCounty(data) {//县级地图配置
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = this.geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value),
                        symbolSize: 30,
                        itemStyle: {
                            color: '#ff2600'
                        }
                    });
                }
            }
            return res;
        },
        registerMap() {
            return service.get('/' + this.areaCode + '.json').then(res => {
                let { data } = res
                // 注册地图
                echarts.registerMap('jiangs', data);
                this.geoCoordMap = {}
                //需要的标记的点经纬度点 对应数据 暂时获取地图json里的区划名字及纬度{"xxx市名字":[1232,2323]}
                data.features.map((item) => {
                    this.geoCoordMap[item.properties.name] = item.properties.centroid
                    return
                })

            })
        },
        getUserInfo() {//获取信息
            service.get('/mock.json').then(res => {
                if (res.status == 200) {
                    // let { data } = res
                    this.isCounty = false//是否区县
                    this.defaultCityName = '江苏省'
                    this.cityName = '江苏省'
                    this.areaCode = '320000',//行政区划代码
                        this.registerMap().then(() => {
                            this.init()
                        })
                }
            }).catch(err => {
                alert(err)
            })
        },
        setBodyScale() {
            const el = document.querySelector('.wrapper')
            const zoom = (window.innerHeight / 1080).toFixed(3)
            if (el) {
                el.style.transform = 'scale(' + zoom + ')';
            } else {
                document.addEventListener('DOMContentLoaded', this.setBodyScale)
            }
        },
        drawMap() {//地图
            service.get('/mock.json', {
                params: {
                    // 参数类型
                    // type: this.currenType
                }
            }).then(res => {
                if (res.status === 200) {
                    let { mapData } = res.data
                    this.mapInfo.count = Math.floor(Math.random() * 1000)//暂时伪造随机
                    this.mapInfo.mapData = mapData
                    this.mapInfo.mapEcharts = echarts.init(document.getElementById('map'));
                    //不是区县 allEchartsOption.map配置  是区县 allEchartsOption.countyMap 配置
                    let option
                    this.isCounty ? option = allEchartsOption.countyMap : option = allEchartsOption.map
                    //地图过度颜色
                    option.visualMap.inRange.color = this.mapInfo.inRangeColor
                    // 数据标记 定义echartsfn里的过滤数据方法
                    //不是区县  this.convertData(this.mapInfo.mapData)配置  是区县this.convertDataByCounty(this.mapInfo.mapData) 配置
                    option.series[0].data = this.isCounty ? this.convertDataByCounty(this.mapInfo.mapData) : this.convertData(this.mapInfo.mapData)
                    // 填入数据
                    option.series[1].data = this.mapInfo.mapData
                    // 使用刚指定的配置项和数据显示图表。
                    this.mapInfo.mapEcharts.setOption(option);
                    this.mapInfo.mapEcharts.on('mapselectchanged', (params) => {
                        let selectedList = params.batch[0].selected
                        let c = Object.keys(selectedList).filter(item => {
                            if (selectedList[item]) {
                                return item
                            } else {
                                return
                            }
                        })
                        this.cityName = !c.toString() ? this.defaultCityName : c.toString()
                    })
                }
            }).catch(err => {
                alert(err)
            })

        },
        handleTypeClick(item) {
            // 类型点击
            this.currenType = item.type//改变当前类型
            this.mapInfo.inRangeColor = item.inRangeColor//改变渐变颜色
            this.cityName = this.defaultCityName;

        },
        initScale() {
            this.setBodyScale();
            // 窗口改变时候重新设置缩放
            window.addEventListener('resize', this.setBodyScale)
            window.addEventListener('pageshow', (e) => {
                if (e.persisted) {
                    this.setBodyScale()
                }
            })
        }
    },
    watch: {
        currenType(newType, oldType) {
            //监听类型改变后一系操作
            this.drawMap()
        }
    }
})


